import { PureComponent } from "react"
import { InputItem } from "antd-mobile"
import MToast from "../Util/MToast"
import { isNull, handleInputFocusBlur } from "../../utils/helper"

interface Props {
	isReset: boolean,
	getFieldDecorator: Function,
	field: string[],
	defaultFormData: object,
	label?: string,
	required?: any,
	place_holder?: string,
	disabled?: any,
	readonly?: any,
	show_label?: any,
	tips?: string,
	max_length?: any,
	label_width?: any,
	type?: any,
	label_text_color?: string,
	label_text_align?: any
	label_style?: any,
	input_style?: any
	required_no_star?: any
	save_to_ls_key?: any,//是否将实时输入的值存在Storage中,如果不为空,就实时保存到本地,key值即为配置的值
	reg_rules?:any,
}
interface State {
	hasError: boolean,
	errorMsg: string
}
export default class MiInput extends PureComponent<Props, State> {
	public state: State = {
		hasError: false,
		errorMsg: ""
	}
	componentWillReceiveProps(next: Props) {
		let { isReset: oldReset } = this.props;
		let { isReset: newReset } = next;
		if (oldReset !== newReset && newReset) {
			this.setState({
				hasError: false
			})
		}
	}
	render() {
		let { getFieldDecorator, field, defaultFormData, label, required, place_holder, disabled, readonly, show_label, tips, max_length, label_width = 5, type = "text", label_text_color, label_style, label_text_align = "left", input_style, required_no_star, save_to_ls_key, reg_rules } = this.props;
		let isDisabled = disabled == 1;
		let isReadonly = readonly == 1;
		let isShowLabel = isNull(show_label) || show_label == 1;
		let { hasError } = this.state;
		let isRequired = required == 1;
		let requiredClass = "";
		if (isRequired && required_no_star != 1) {
			requiredClass = "required"
		}
		if (!isNull(label_text_align)) {
			requiredClass += " label-text-align-" + label_text_align
		}
		return <div>
			{
				getFieldDecorator(field[0], {
					initialValue: defaultFormData[field[0]],
					rules: [{
						validator: (rule, value, callback) => {
							if(!isNull(value)){
								value=value.toString().trim();//去除两头空格
							}
							if (isRequired) {
								if (isNull(value)) {
									// if (!hasError) {
									this.setState({
										hasError: true,
										errorMsg: "请输入：" + label
									})
									// callback("请输入：" + label)
									callback("请输入：" + label)
									// }
								}
								else {
									if (!isNull(reg_rules)) {
										console.log(reg_rules);
										var reg = new RegExp(reg_rules);
										console.log(reg_rules, reg, value)
										if (!reg.test(value)) {
											this.setState({
												hasError: true,
												errorMsg: "请输入：" + label
											})
											callback("不符合规则:" + reg)
										}
										else{
											this.setState({
												hasError: false,
												errorMsg: ""
											})
											callback()
										}
									}
									else {
										this.setState({
											hasError: false,
											errorMsg: ""
										})
										callback()
									}

								}
							}
							callback()
						}
					}]
				})(<InputItem
					autoComplete='new-password'
					onChange={(e) => {
						if (!isNull(save_to_ls_key)) {
							localStorage.setItem(MI_APP_CODE+save_to_ls_key, e);
						}
					}}
					type={type}
					onExtraClick={() => {
						MToast.info(tips, 1, null, false)
					}}
					className={requiredClass}
					placeholder={place_holder}
					clear
					labelNumber={label_width}
					error={hasError}
					onErrorClick={() => {
						MToast.info(this.state.errorMsg, 1, null, false)
					}}
					disabled={isDisabled}
					editable={!isReadonly}
					maxLength={max_length}
					onFocus={() => {
						handleInputFocusBlur()
					}}
					onBlur={() => {
						handleInputFocusBlur(true);
					}}
					style={{
						...input_style
					}}
				>
					{isShowLabel && <span style={{ color: label_text_color, ...label_style }}>{label}</span>}
				</InputItem>)
			}
			{
				tips && <p className="tipsStyle">{tips}</p>
			}
		</div>
	}
}